<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      div{border:solid 1px black;padding: 10px;margin: 10px;}
    </style>
	</head>
	<body>
    <div id="app">
      <h1>{{title}}</h1>
      <p>我是：{{name}}</p>
      <p>我有一个：{{a}}</p>
      <c></c>
    </div>
	</body>
  <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
  
  <template id="kx">
    <div>
      <h2>我是：{{name}}</h2>
      <p>我有什么：{{a}}</p>
      <p>不明上层传递的：{{data}}</p>
      <child1></child1>
      <child2></child2>
    </div>
  </template>
  <template id="yx">
    <div>
      <h3>我是：{{name}}</h3>
      <p>我有什么：{{a}}</p>
      <p>我<button @click="send">给</button>兄弟了一个：{{a}}</p>
      <p>不明上层传递的：{{data}}</p>
    </div>
  </template>
  
  <template id="yz">
    <div>
      <h3>我是：{{name}}</h3>
      <p>我有什么：{{a}}</p>
      <p>我拿到了儿子的：{{b}}</p>
      <p>我收到了兄弟的：{{c}}</p>
      <child :abc="a" v-on:myeve="getData"></child>
    </div>
  </template>
  
  <template id="ql">
    <div>
      <h4>我是：{{name}}</h4>
      <p>我有什么：{{a}}</p>
      <p>收到了父级的：{{abc}}</p>
      <p>不明上层传递的：{{data}}</p>
    </div>
  </template>
  
  
  <script type="text/javascript">
    // 中央事件总线
    let bus = new Vue();
    
    let temp1 = {
      template:"#ql",
      data(){
        return {
          name:"乾隆",
          a:"手机"
        }
      },
      props:{
        abc:{
          type:String,
          default:"崇明的房子",
          required:true
        }
      },
      created(){
        this.$emit("myeve", this.a)
      },
      inject:["data"]
    }
    let temp2 = {
      template:"#yx",
      data(){
        return {
          name:"胤祥",
          a:"大众"
        }
      },
      methods:{
        send(){
          bus.$emit("qwe", this.a);
        }
      },
      inject:["data"]
    }
    let temp3 = {
      template:"#yz",
      data(){
        return {
          name:"雍正",
          a:"黄浦区的房子",
          b:"",
          c:""
        }
      },
      components:{
        child: temp1
      },
      methods:{
        getData(v){
          console.log(v);
          this.b = v;
        }
      },
      created(){
        bus.$on("qwe",(v)=>{
          console.log(v);
          this.c = v;
        })
      }
    }
    let temp4 = {
      template:"#kx",
      data(){
        return {
          name:"康熙",
          a:"翡翠白菜"
        }
      },
      components:{
        child1: temp2,
        child2: temp3
      },
      inject:["data"]
    }
    
    var vm = new Vue({
      el:"#app",
      data:{
        title:"hello component",
        name:"努尔哈赤",
        a: "江山"
      },
      components:{
        c:temp4
      },
      provide:{
        data: "江山"
      }
    })

    // 努尔哈赤
    //   康熙
    //     雍正
    //       乾隆
    //     胤祥
      
  </script>
</html>
